<template>
    <div class="home_level">
        <h2>医院</h2>
        <div class="content">
            <div class="left">等级:</div>
            <div class="whole" @click="changeLevel('')" :class="{ active: !activeFlag }">全部</div>
            <ul class="hospital">
                <li @click="changeLevel(item.value)" v-for=" item  in  levelArr " :key="item.value"
                    :class="{ active: activeFlag == item.value }">{{ item.name }}</li>

            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { reqHospitalLevelAndRegion } from '@/api/home';
import type { HospitalLevelAndRegionResponseData, HospitalLevelAndRegionArr } from '@/api/home/type';

let $emit = defineEmits(['getLevel'])
// 定义一个数组存储医院等级数据
let levelArr = ref<HospitalLevelAndRegionArr>([])
// 控制医院等级高亮
let activeFlag = ref<string>('')
onMounted(() => {
    getLevel()
});
// 获取医院等级的数据
const getLevel = async () => {
    let { code, data }: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('HosType')
    if (code === 200) {
        levelArr.value = data
    }

}
// 点击等级按钮回调
const changeLevel = (level: string) => {
    activeFlag.value = level
    // 触发自定义事件
    $emit('getLevel', level)
}

</script>
<script lang="ts">
export default {
    name: 'Level'
}
</script>
<style scoped lang="scss">
.home_level {
    color: #7f7f7f;

    h2 {
        color: black;
        font-weight: 700;
        margin: 10px 0;
    }

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            min-width: 36px;
        }

        .whole {
            height: 100%;
            min-width: 30px;
            cursor: pointer;
            margin-right: 10px;

            &.active {
                color: #55affe;
            }
        }

        .whole:hover {
            color: #55affe;
        }

        .hospital {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-bottom: 10px;
                margin-right: 10px;
                cursor: pointer;

                &.active {
                    color: #55affe;
                }
            }

            li:hover {
                color: #55affe;
            }
        }
    }
}

@media (max-width:768px) {
    .content {
        font-size: 14px !important;

        .left {
            margin-right: 4px !important;
        }

        .whole {
            margin-right: 6px !important;
        }
    }
}
</style>